<template>
	<view class="swiper-box">
		<swiper class="swiper" :style="{height: height + 'px'}" circular acceleration :autoplay="autoplay"
			easing-function="easeInOutCubic" :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor" :interval="interval" :duration="duration"
			@change="changeSwiper">

			<swiper-item v-for="(item, index) in list" :key="index">

				<view class="swiper-item uni-bg-red" v-if="item.type == 2">
					<c-video :videoItem="item" :isPause="isPause" :height="height" :controls="false"
						:showCenterPlayBtn="false" @fullscreenclick="fullscreenclick" @changePlay="changePlay" />
				</view>

				<view class="swiper-item uni-bg-red" v-if="item.type == 1" @click="imageYUlan(item, index)">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="indicator-num" v-if="indicatorCustom">
			<text class="indicator-num__text">{{ current + 1 }}/{{ list.length }}</text>
		</view>
	</view>

</template>
<script setup>
	import cVideo from './cVideo.vue'
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		height: {
			type: [Number, String],
			default: 372
		},
		indicatorDots: {
			type: Boolean,
			default: true
		},
		autoplay: {
			type: Boolean,
			default: false
		},
		circular: {
			type: Boolean,
			default: true
		},
		interval: {
			type: Number,
			default: 2000
		},
		duration: {
			type: Number,
			default: 500
		},
		indicatorColor: {
			type: String,
			default: 'rgba(255,255,255,0.2)'
		},
		indicatorActiveColor: {
			type: String,
			default: '#fff'
		},
		indicatorCustom: {
			type: Boolean,
			default: false
		}
		// autoplay: {
		// 	type: Boolean,
		// 	default: true
		// },
		// circular: {
		// 	type: Boolean,
		// 	default: true
		// }
	})
	const emits = defineEmits(['fullscreenclick'])

	const current = ref(0)
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const fullscreenclick = (e) => {
		emits('fullscreenclick')
	}

	const imageYUlan = (image, index) => {
		// 图片预览
		const imags = props.list.map(item => item.url)
		
		console.log(imags, '2131')
		uni.previewImage({
			urls: [image.url],
			// current: index,
		});
	}

	const videoItem = ref({})
	const imageList = ref([])

	const getAdFind = async () => {

		const res1 = await $post('/index/base/ad/ad_find', {
			code: '首页-轮播视频'
		})
		videoItem.value = res1.data

		const res = await $post('/index/base/ad/ad_find', {
			code: '首页-轮播图'
		})
		imageList.value = res.data

	}

	const onVideo = () => {
		let videoContext = uni.createVideoContext('myVideo', this)
		if (videoContext.paused) {
			videoContext.play(); // 如果视频是暂停的，则播放视频
		} else {
			videoContext.pause(); // 如果视频正在播放，则暂停视频
		}
	}

	const isPause = ref(false)
	const changePlay = (v) => {
		isPause.value = v
	}
	const changeSwiper = (e) => {
		current.value = e.detail.current
		isPause.value = false
	}

	Vue.onShow(() => {
		initPage()
	})
	Vue.onLoad(() => {})
	Vue.onMounted(() => {
		// getAdFind()
	})
</script>
<style scoped lang='scss'>
	.swiper-box {
		position: relative;
	}

	.indicator-num {
		position: absolute;
		z-index: 100;
		bottom: 40rpx;
		right: 40rpx;

		.indicator-num__text {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 26rpx;
			color: #EAEAEA;
			text-align: center;
			line-height: 40rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			padding: 4rpx 20rpx;

		}
	}

	.swiper {
		width: 100%;
		/* height: 372rpx; */

		.swiper-item {
			height: 100%;

			.video-img {
				width: 100%;
				height: 100%;
				position: relative;

				&::after {
					display: block;
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.play-icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 3;
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>